<template>
  <div ref="rank" class="rank-container">
    <Search />
    <div class="result-container">
      <div v-for="(item, index) in list" :key="index">
        <Classify :detail="item" :rank="index+1" />
      </div>
    </div>
    <p v-if="isFinished" class="bottom-tips">
      没有更多了~
    </p>
    <p v-else-if="isError" class="bottom-tips" @click="getMoreData">
      数据加载失败~
    </p>
    <p v-else class="bottom-tips">
      数据加载中~
    </p>
  </div>
</template>

<script>
import Search from '~/components/Search'
import Classify from '~/components/Classify'
export default {
  name: 'Rank',
  components: {
    Search,
    Classify
  },
  async asyncData ({ $axios }) {
    const url = 'http://132.232.41.218:3389/rank?type=4&pageNum=1'
    //    http://132.232.41.218:3389/rank?type=4&pageNum=1
    //    pageNum 为多少页 每页默认20条 参数query类型  GET请求
    //    type未排行类型 1：日读榜 2：周读榜 3：月读榜 4: 日热门榜 5：最新榜 6：新作榜
    const res = await $axios.get(url)
    return {
      list: res.data
    }
  },
  data () {
    return {
      list: [],
      isFinished: false,
      isLoading: false,
      isError: false,
      type: 4,
      pageNum: 1,
      scrollingElement: null,
      isReachBottom: false,
      reachBottomDistance: 100 // 距离底部多远触发
    }
  },
  mounted () {
    this.scrollingElement = document.scrollingElement
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      // 处理下拉加载
      if (this.isLoading) {
        return null
      }
      const scrollHeight = this.scrollingElement.scrollHeight
      const currentHeight = this.scrollingElement.scrollTop + this.scrollingElement.clientHeight + this.reachBottomDistance
      if (currentHeight < scrollHeight && this.isReachBottom) {
        this.isReachBottom = false
      }
      if (this.isReachBottom) {
        return
      }
      if (currentHeight >= scrollHeight) {
        this.isReachBottom = true
        this.getMoreData()
      }
    },
    async getMoreData () {
      this.isLoading = true
      this.isError = false
      const pageNum = this.pageNum + 1
      const type = this.type
      const url = `http://132.232.41.218:3389/rank?type=${type}&pageNum=${pageNum}`
      try {
        this.$axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'
        this.$axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
        const res = await this.$axios.get(url)
        alert(JSON.stringify(res))
        if (res.data && Array.isArray(res.data) && (res.data.length > 0)) {
          this.list = this.list.concat(res.data)
          this.isLoading = false
          this.isError = false
          this.pageNum = this.pageNum + 1
        } else if (res.data && Array.isArray(res.data) && (res.data.length === 0)) {
          this.isLoading = false
          this.isError = false
          this.isFinished = true
        }
      } catch (err) {
        alert(JSON.stringify(err))
        this.isError = true
        this.isLoading = false
      }
    }
  },
  head () {
    return {
      title: '排行榜'
    }
  }
}
</script>

<style lang="scss" scoped>
    .rank-container {
        .result-container {
            box-sizing: border-box;
            padding: 20px;
            padding-bottom: 0px;
            padding-top: 0px;
        }
        .bottom-tips {
            text-align: center;
            font-size: 12px;
            color: #ccc;
            box-sizing: border-box;
            padding-bottom: 20px;
        }
    }
</style>
